Restyle to a flat Miniflux-like design

- hairline separators instead of bordered rows, square corners, no shadows
- white background, system font stack, slimmer headings
- pine green accent; amber warn ramp carries the attention marks (due/late/mid)
- no hover backgrounds: hover is color/fill-state only
- reserve bold nav tab width and the scrollbar gutter so navigation never shifts layout

1 files changed, 3 insertions, 14 deletions

diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index c672730..56e57fd 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -142,7 +142,7 @@
 	{/if}
 
 	<form method="POST" action="?/delete" use:enhance>
-		<ul class="item-list item-list--wide">
+		<ul class="item-list">
 			{#each data?.references ?? [] as ref (ref.id)}
 				<Row variant="ref">
 					<div class="ref-info">
@@ -184,7 +184,6 @@
 		margin-top: -0.25rem;
 		visibility: hidden;
 		opacity: 0;
-		transition: opacity 0.2s ease;
 		min-height: 1.25rem;
 	}
 
@@ -215,9 +214,6 @@
 		color: var(--text-secondary);
 		font-size: 0.875rem;
 		font-weight: 500;
-		background: var(--bg);
-		padding: 0.125rem 0.5rem;
-		border-radius: 0.375rem;
 	}
 
 	.error {
@@ -227,25 +223,18 @@
 
 	hr {
 		border: none;
-		border-top: 1.5px solid var(--border);
+		border-top: 1px solid var(--border);
 		margin: 1.5rem 0;
 	}
 
 	.delete-item-btn {
 		margin-top: 1.5rem;
 		padding: 0.625rem 1.25rem;
-		border: 1.5px solid var(--danger);
-		border-radius: 0.75rem;
+		border: 1px solid var(--danger);
 		background: var(--surface);
 		color: var(--danger);
 		font-size: 0.875rem;
 		font-weight: 500;
 		cursor: pointer;
-		transition: all 0.2s ease;
-	}
-
-	.delete-item-btn:hover {
-		background: var(--danger-bg);
-		transform: translateY(-1px);
 	}
 </style>